<template>
  <div id="index" v-if="data">
    <!--页头部分  -->
    <div class="f">
      <div class="center">
        <div>
          <p>在线选购，享受免费送货、Specialist 专家支持、免息分期等服务。</p>
        </div>
      </div>
    </div>
    <!-- ----------------------------一楼结构---------------------------------------- -->
    <div class="f1">
      <div class="center">
        <div class="box" :style="{ backgroundImage: `url(${data.img2})` }">
          <div class="text">
            <h2>MacBook Air</h2>
            <img :src="`${data.img1}`" />
            <router-link class="btn" to="/macbookAir-M2">购买 </router-link>
            <router-link to="/macbookAir-M2">进一步了解 > </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- ----------------------------二楼结构---------------------------------------- -->
    <div class="f2">
      <div class="center">
        <div class="box" :style="{ backgroundImage: `url(${data.img3})` }">
          <div class="text">
            <span>爽心特惠，</span> <span>和夏天很对味</span>
            <p>
              7月29日至8月1日，来畅享限时优惠,以指定方式支付最高省 RMB 600。
            </p>
            <router-link to="/store">进一步了解 > </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- ----------------------------三楼结构---------------------------------------- -->
    <div class="f3">
      <div class="center">
        <div class="box" :style="{ backgroundImage: `url(${data.img4})` }">
          <div class="text">
            <span>强势高效装备</span> <span>飚起来。</span>
            <p>买Mac 或 iPad有优惠，另有AirPods搭配其中<sup>1</sup> 。</p>
            <router-link to="/backToSchool">立即选购 > </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- ----------------------------四楼结构---------------------------------------- -->
    <div class="f4">
      <div class="center">
        <div class="box">
          <div class="box1" :style="{ backgroundImage: `url(${data.img5})` }">
            <div>
              <h2>iPhone 13</h2>
              <p>解锁超能力</p>
              <router-link class="btn" to="/iphone13">购买 </router-link>
              <router-link to="/iphone13">进一步了解 > </router-link>
            </div>
          </div>
          <div class="box2" :style="{ backgroundImage: `url(${data.img7})` }">
            <div class="box2-1">
              <h2>13 英寸 MacBook Pro</h2>
              <img :src="`${data.img6}`" />
              <router-link class="btn" to="/macpro-13">购买 </router-link>
              <router-link to="/macpro-13">进一步了解 > </router-link>
            </div>
          </div>
          <div class="box3" :style="{ backgroundImage: `url(${data.img8})` }">
            <div>
              <h2>iPhone 13 Pro</h2>
              <p>强的很</p>
              <router-link class="btn" to="/iphone13pro">购买 </router-link>
              <router-link to="/iphone13pro">进一步了解 > </router-link>
            </div>
          </div>
          <div class="box4" :style="{ backgroundImage: `url(${data.img11})` }">
            <div>
              <img :src="`${data.img10}`" />
              <p>SERIES 7</p>
              <p>Apple Watch 抗得住。</p>
              <router-link class="btn" to="/watchS7">购买 </router-link>
              <router-link to="/watchS7">进一步了解 > </router-link>
            </div>
          </div>
          <div class="box5" :style="{ backgroundImage: `url(${data.img13})` }">
            <div>
              <img :src="`${data.img12}`" />
              <p>轻，靓，重量级。</p>
              <router-link class="btn" to="/ipadAir">购买 </router-link>
              <router-link to="/ipadAir">进一步了解 > </router-link>
            </div>
          </div>
          <div class="box6" :style="{ backgroundImage: `url(${data.img14})` }">
            <div class="box6-1">
              <h2>AirPod</h2>
              <p>全新支持空间音频</p>
              <router-link class="btn" to="//airPods2">购买 </router-link>
              <router-link to="/airPods2">进一步了解 > </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/ipadImg/3";
      axios.get(url).then(res => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
#index {
  width: 100%;
  height: 100%;
}
</style>
<style scoped src="../assets/css/index.css"></style>
